<template>
    <el-form :model="user" :rules="rules" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="user.name" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="账号" prop="phone">
      <el-input v-model="user.phone" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="user.password" autocomplete="off"/>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="getlist">登录</el-button>
    </el-form-item>
    </el-form>
</template>
<script setup>
    import axios from 'axios'
    import {ref,onMounted} from "vue"
    import { ElMessage } from 'element-plus';
    let user=ref({
        phone:"",
        password:""
    })
    const getlist=()=>{
        axios.post("http://127.0.0.1:8000/user/user/login/",user.value)
        .then(res=>{
            console.log(res)
            if(res.data.status==200){
                ElMessage.success("登陆成功")
            }
            if(res.data.status==400){
                ElMessage.success("密码错误")
            }
            if(res.data.status==404){
                ElMessage.success("账号不存在")
            }
        })
    }
    const rules=ref({
        password: [
            {
            required: true, message: '密码不能为空', trigger: 'blur',
            min: 6, message: '密码长度不能小于6位', trigger: 'blur'
            }
        ],
        phone: [
            {
            required: true, message: '手机号不能为空', trigger: 'blur',
            pattern: /^[1][35789]\d{9}$/, message: '手机号码必须要符合规范', trigger: 'blur'
            }
        ]
        })
</script>